<template>
  <div>
    <!-- <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      :title="housedata.subdistrict"
      left-arrow
      @click-left="back"
    >
      <template #right>
        <van-icon
          size="21"
          color="#333"
          name="share-o"
          @click="showShare = true"
        />
      </template>
    </van-nav-bar> -->
    <div class="navbar">
      <div>
        <van-icon name="arrow-left" size="16" @click="back" />
      </div>
      <div>
        <!-- <van-icon name="share-o" size="22" @click="showShare = true" /> -->
        <img src="@/assets/share.png" alt="" width="22px" @click="isShare" />
      </div>
    </div>
    <div class="swiperon">
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide v-for="(item, index) in images" :key="index">
          <!-- <img :src="item" alt="" /> -->
          <div
            class="imgpart"
            :style="'background-image:url(' + item + ')'"
            @click="showimg(index)"
          />
        </swiper-slide>
        <div slot="pagination" class="swiper-pagination" />
      </swiper>
    </div>
    <div class="detail">
      <div
        class="title"
        style="
          max-width: 92vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        "
      >
        {{ housedata.subdistrict }}
      </div>
      <div class="name">
        <div class="boxone">￥{{ housedata.price }}</div>
        <div class="title PV" v-if="userId">
          <img
            src="@/assets/eye.png"
            alt=""
            width="20px"
            style="margin-right: 4px"
          />{{ housedata.rentPv }}+
        </div>
      </div>
      <div class="check">
        <div>
          <img src="@/assets/pro01.png" alt="" />
          <span>房源真实</span>
        </div>
        <div>
          <img src="@/assets/pro02.png" alt="" />
          <span>房东真实</span>
        </div>
        <div>
          <img src="@/assets/pro03.png" alt="" />
          <span>产权核验</span>
        </div>
        <div>
          <img src="@/assets/pro04.png" alt="" />
          <span>实名认证</span>
        </div>
      </div>
      <div class="boxtwo">
        <div class="sbox">
          <div>户型：{{ housedata.houseType }}</div>
          <div>面积：{{ housedata.acre }}m<span class="up">2</span></div>
        </div>
        <div class="sbox">
          <div>楼层：{{ housedata.floor }}</div>
          <div>电梯：{{ housedata.elevator }}</div>
        </div>
        <div class="sbox">
          <div>付款：{{ housedata.paymentMethod }}</div>
          <div>租赁：{{ housedata.rentalWay }}</div>
        </div>
        <div>地址：{{ housedata.address }}</div>
      </div>
    </div>
    <div class="addressbox">
      <div class="" @click="showmapapp = true">
        <span class="topwords">位于</span>
        <span>{{ housedata.address }}</span>
        <!-- <span v-show="housedata.distance == ''">暂无位置信息</span> -->
      </div>
      <div @click="jumptocommute">
        <span>设置通勤</span>距设置公司 / 常用地址
      </div>
    </div>
    <div class="cut" />
    <div style="margin-left: 15px; margin-top: 15px" class="tip">
      <span />房东推荐
    </div>
    <div
      v-if="housedata.recommend.length == 0 || housedata.recommend == ''"
      class="lan"
    >
      房东特别忙,推荐都懒得选,好房源不惧挑剔!
    </div>
    <div v-show="housedata.recommend.length != 0" class="housetips">
      <span v-show="item" v-for="item in housedata.recommend" :key="item">{{
        item
      }}</span>
    </div>
    <div class="cut" />
    <div v-show="housedata.indoorVideo" class="see">
      <div class="tip"><span />房屋视频</div>
      <video
        preload="metadata"
        :poster="housedata.indoorVideo + '?vframe/jpg/offset/1'"
        :src="housedata.indoorVideo"
        controls="controls"
      />
    </div>
    <div v-show="housedata.indoorVideo" class="cut" />
    <div v-show="housedata.houseService.length != 0" class="equipment">
      <div v-if="housedata.rentalWay == '整租'" class="tip">
        <span />设备设施
      </div>
      <div v-if="housedata.rentalWay == '合租'" class="tip">
        <span />公用设施
      </div>
      <div class="epart">
        <div v-for="item in housedata.houseService" :key="item">{{ item }}</div>
      </div>
    </div>
    <div v-show="housedata.houseService.length != 0" class="cut" />
    <div
      v-show="
        housedata.roomService.length != 0 && housedata.rentalWay != '整租'
      "
      class="equipment"
    >
      <div class="tip"><span />房间设施</div>
      <div class="epart">
        <div v-for="item in housedata.roomService" :key="item">{{ item }}</div>
      </div>
    </div>
    <div
      v-show="
        housedata.roomService.length != 0 && housedata.rentalWay != '整租'
      "
      class="cut"
    />
    <div class="asideaddress">
      <div class="tip"><span />周边位置</div>
      <div id="normal_map" />
      <!-- <div id="content">
        <div class="amap-page-container">
          <el-amap
            v-if="showmap"
            vid="amapDemo"
            :center="center"
            :zoom="zoom"
            class="amap-demo"
            pitch-enable="false"
          >
            <el-amap-circle
              el-amap-circle
              vid="circle"
              :center="center"
              :radius="radius"
              fill-opacity="0.2"
              stroke-color="#38f"
              stroke-opacity="0.8"
              stroke-weight="1"
              fill-color="#38f"
            />
            <el-amap-marker
              v-for="(marker, index) in markers"
              :key="index"
              :position="marker.position"
            />
          </el-amap>
        </div>
      </div> -->
      <van-tabs
        v-model="keywords"
        title-active-color="#45b7cb"
        title-inactive-color="#333"
        color="#45b7cb"
        @change="showaround"
      >
        <van-tab name="餐饮" title="餐饮">
          <div v-for="item in aroundinfo" :key="item" class="showouteq">
            <van-icon name="location-o" />{{ item }}
          </div>
        </van-tab>
        <van-tab name="地铁" title="交通">
          <div v-for="item in aroundinfo" :key="item" class="showouteq">
            <van-icon name="location-o" />{{ item }}
          </div>
        </van-tab>
        <van-tab name="购物" title="购物">
          <div v-for="item in aroundinfo" :key="item" class="showouteq">
            <van-icon name="location-o" />{{ item }}
          </div>
        </van-tab>
        <van-tab name="休闲" title="休闲">
          <div v-for="item in aroundinfo" :key="item" class="showouteq">
            <van-icon name="location-o" />{{ item }}
          </div>
        </van-tab>
        <van-tab name="学校" title="学校">
          <div v-for="item in aroundinfo" :key="item" class="showouteq">
            <van-icon name="location-o" />{{ item }}
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="cut" />
    <!-- <div class="streetscape">
      <div class="tip"><span />街景地图
        <span></span>
      </div>
      <div id="panorama" />
      <baidu-map
        class="showstreet"
        :center="center2"
        ak="o3rIKa0I3thGV2XnHHI5ktLmpjcEbCxI"
        :zoom="15"
      >
        <bm-panorama />
      </baidu-map>
    </div>
    <div class="cut" /> -->
    <div v-show="housedata.surroundingsVideo" class="see">
      <div class="tip"><span />周边环境视频</div>
      <video
        preload="metadata"
        :poster="housedata.surroundingsVideo + '?vframe/jpg/offset/1'"
        :src="housedata.surroundingsVideo"
        controls="controls"
      />
    </div>
    <div v-show="housedata.surroundingsVideo" class="cut" />
    <div style="margin-left: 15px; margin-top: 15px" class="tip">
      <span />房东偏好
    </div>
    <div
      v-if="housedata.preference.length == 0 || housedata.preference == ''"
      class="lan"
    >
      房东很随性,租客也要多多体谅配合哦！
    </div>
    <div v-show="housedata.preference.length != 0" class="housetips">
      <span v-show="item" v-for="item in housedata.preference" :key="item">{{
        item
      }}</span>
    </div>
    <div class="cut" />
    <div v-show="false" class="experience">
      <div class="tip"><span />居住体验</div>
      <div class="textpart">
        <textarea
          placeholder="在这里对该区域、小区、房东、房源等做出评价"
          name=""
        />
        <van-button>提交</van-button>
      </div>
    </div>
    <div class="housenum">
      房源编号:<span ref="copyword">{{ housedata.houseSn }}</span
      ><span class="copy" @click="copy">复制</span>
    </div>
    <div class="bcut" />
    <div class="btnpart">
      <div class="top">
        <div>
          <van-icon
            v-show="!collect"
            style="margin-right: 5px"
            name="star-o"
            color="#45a7cd"
            @click="change1"
            >关注</van-icon
          >
          <van-icon
            v-show="collect"
            color="#45a7cd"
            name="star"
            style="margin-right: 5px"
            @click="change2"
            >关注</van-icon
          >
        </div>
        <div>
          <van-button class="cancelbtn" @click="jump">在线直聊</van-button>
          <van-button @click="callowner" class="callbtn">
            <span>直连房东</span>
            <br />
            <span id="yin">隐私电话</span>
          </van-button>
        </div>
      </div>
      <div class="safe" />
    </div>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <van-action-sheet
      v-model="showmapapp"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="selectmap"
    />
    <van-overlay :show="show" class="zhe">
      <img src="@/assets/loudou.gif" alt="" width="50px" />
    </van-overlay>
  </div>
</template>
<script>
import { ImagePreview } from "vant";
// import BaiduMap from "vue-baidu-map/components/map/Map.vue";
// import BmPanorama from "vue-baidu-map/components/controls/Panorama.vue";
import { getRyId, getUserId, getGeolocation } from "@/utils/auth";
import { LANDLORD_CONTACT_INTEGRAL } from "@/construct/const";
import { mapGetters } from "vuex";
import { _local } from "@/utils/storage";
import {
  getHousedetail,
  collectHouse,
  cancelcollectHouse,
  getUnloginHousedetail,
} from "@/apis/house";
import { getImpay, RanterImpay, virtualNum } from "@/apis/user.js";
import { getTianPeriphery } from "@/apis/map";
import { shareIntegral, integralOrder } from "@/apis/integral";
import { addLog } from "@/apis/user";
import { getNearby } from "@/apis/city";

export default {
  // components: {
  //   BaiduMap,
  //   BmPanorama,
  // },
  data() {
    return {
      time: 0,
      timer: "",
      mark: {
        lng: "",
        lat: "",
      },
      show: true,
      ryId: "",
      myryId: "",
      userId: "",
      roomId: "",
      housedata: {
        recommend: [],
        houseService: [],
        roomService: [],
        preference: [],
      },
      images: [],
      loc: [],
      imgurl: "",
      showShare: false,
      collect: false,
      options: [[{ name: "微信", icon: "wechat" }]],
      center: [104.066301, 30.572961],
      center2: { lng: "", lat: "" },
      center3: "",
      zoom: 14,
      radius: 1000,
      keywords: "餐饮",
      aroundinfo: [],
      showmap: false,
      contactLandlordNum: 0,
      showmapapp: false,
      actions: [
        { name: "腾讯地图" },
        { name: "高德地图" },
        { name: "百度地图" },
      ],
      swiperOption: {
        slidesPerView: "auto",
        spaceBetween: 10,
        pagination: {
          el: ".swiper-pagination",
          type: "fraction",
        },
      },
      mapurl: "",
    };
  },
  computed: {
    ...mapGetters(["role", "integral"]),
  },
  mounted() {
    this.getTime();
    if (this.userId) {
      window.onload = this.gethouseinfo();
    } else {
      window.onload = this.getUnloginhouseinfo();
    }
  },
  destroyed() {
    clearInterval(this.timer);
    this.getUserInfo();
  },
  created() {
    //h5+功能接口需要调用此函数
    const _this = this;
    _this.$plusReady(() => {
      plus.share.getServices(function (e) {
        _this.shareData = e;
        for (var i in e) {
          if (e[i].id == "weixin") {
            _this.sharewx = e[i];
          }
        }
      });
    });
    this.myryId = getRyId();
    this.roomId = this.$route.query.roomId;
    this.userId = getUserId() ? getUserId() : "";

    document.documentElement.scrollTop = 0;
    this.roomId = this.$route.query.roomId;

    if (this.userId) {
      this.$store.dispatch("manage/getInfo", { userId: this.userId });
      this.gethouseinfo();
    } else {
      this.getUnloginhouseinfo();
    }
  },
  methods: {
    getTime() {
      this.timer = setInterval(() => {
        this.time++;
      }, 1000);
    },
    getUserInfo() {
      addLog({
        adcode: _local.get("adCode"),
        code: "holding",
        page_name: "租房详情页",
        system: _local.get("device"),
        uid: _local.get("ryId"),
        time: this.time,
        describe: `城市:${_local.get("city")},房源编号:${
          this.housedata.houseSn
        },房间号:${this.roomId}`,
      }).then((res) => {});
    },
    isShare() {
      if (this.userId) {
        this.showShare = true;
      } else {
        this.$router.push("/login");
      }
    },
    back() {
      this.$router.go(-1);
    },
    copy() {
      this.$copyText(`${this.housedata.houseSn}`).then(() => {
        this.$toast.success("复制成功");
      });
    },
    // jump() {
    //   console.log("在线聊天");
    //   fetch("http://192.168.101.152:8787/im/send", {
    //     method: "POST",
    //     headers: {
    //       "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
    //       "token": "bearer " + _local.get("token"),
    //     },
    //     body: `house_id=${this.newHouseId}`,
    //   });
    // },
    jump() {
      const _this = this;
      if (_this.userId) {
        if (_local.get("role") === 1) {
          getImpay({
            targetUid: _this.ryId,
            houseSn: this.housedata.houseSn,
          }).then((res) => {
            if (res.code === 201) {
              if (res.result.obtain === 0) {
                if (_this.integral < LANDLORD_CONTACT_INTEGRAL) {
                  _this.$dialog
                    .confirm({
                      title: "温馨提示",
                      className: "leftpart",
                      confirmButtonText: "获取积分",
                      confirmButtonColor: "#45b7cb",
                      message:
                        "您当前的积分不足，仅需5积分即可直连房东本人，是否前往获取积分？",
                      messageAlign: "left",
                    })
                    .then(() => {
                      this.$router.push({ path: "/RechargeIntegral" });
                    })
                    .catch(() => {});
                } else {
                  _this.$dialog
                    .confirm({
                      title: "温馨提示",
                      message:
                        "消耗5积分直连房东，发起在线聊天后，如果拨打电话也不会额外扣除积分。",
                      confirmButtonText: "马上联系",
                      confirmButtonColor: "#45b7cb",
                      messageAlign: "left",
                    })
                    .then(() => {
                      RanterImpay({
                        targetUid: _this.ryId,
                        houseSn: _this.housedata.houseSn,
                        room_id: _this.roomId,
                      }).then((rep) => {
                        console.log(rep);
                        if (rep.code === 200) {
                          // integralOrder({
                          //   house_sn: _this.housedata.houseSn,
                          //   room_id:_this.roomId
                          //  }).then(
                          //   (res) => {
                          //     console.log("生成订单", res);
                          //   }
                          // );
                          _this.$router.push({
                            path: "/chatcontent",
                            query: { sendId: _this.housedata.im_uid },
                          });
                        }
                      });
                    })
                    .catch(() => {});
                }
              } else if (res.result.obtain === 1) {
                _this.$router.push({
                  path: "/chatcontent",
                  query: { sendId: _this.housedata.im_uid },
                });
              }
            }
          });
        } else if (
          _local.get("role") === 0 ||
          _local.get("role") === 3 ||
          _local.get("role") === 5
        ) {
          _this.$dialog
            .alert({
              title: "温馨提示",
              message: "请在个人中心切换【租客】身份使用该功能",
              confirmButtonColor: "#45b7cb",
              theme: "round-button",
              messageAlign: "left",
            })
            .then(() => {});
        } else if (_local.get("role") == 2) {
          _this.$dialog
            .alert({
              title: "温馨提示",
              message: "请在个人中心切换【租客】身份使用该功能",
              confirmButtonColor: "#45b7cb",
              theme: "round-button",
              messageAlign: "left",
            })
            .then(() => {});
        } else if (_local.get("role") == 4) {
          _this.$dialog
            .alert({
              title: "温馨提示",
              message: "请在个人中心切换【租客】身份使用该功能",
              confirmButtonColor: "#45b7cb",
              theme: "round-button",
              messageAlign: "left",
            })
            .then(() => {});
        }
      } else {
        _this.$router.push({ path: "/login" });
      }
    },
    callowner() {
      const _this = this;
      if (_this.userId) {
        if (_local.get("role") === 1) {
          getImpay({
            targetUid: _this.ryId,
            houseSn: this.housedata.houseSn,
          }).then((res) => {
            console.log("getImpay:", res);
            if (res.code === 201) {
              if (res.result.obtain === 0) {
                if (_this.integral < LANDLORD_CONTACT_INTEGRAL) {
                  _this.$dialog
                    .confirm({
                      title: "温馨提示",
                      className: "leftpart",
                      confirmButtonText: "获取积分",
                      confirmButtonColor: "#45b7cb",
                      message:
                        "您当前的积分不足，仅需5积分即可直连房东本人，是否前往获取积分？",
                      messageAlign: "left",
                    })
                    .then(() => {
                      _this.$router.push({ path: "/RechargeIntegral" });
                    })
                    .catch(() => {});
                } else {
                  _this.$dialog
                    .confirm({
                      title: "温馨提示",
                      message:
                        "消耗5积分直连房东，拨打电话后，如果发起聊天也不会额外扣除积分。",
                      confirmButtonText: "马上联系",
                      confirmButtonColor: "#45b7cb",
                      messageAlign: "left",
                    })
                    .then(() => {
                      RanterImpay({
                        targetUid: _this.ryId,
                        houseSn: _this.housedata.houseSn,
                        room_id: _this.roomId,
                      }).then((rep) => {
                        if (rep.code === 200) {
                          // integralOrder({ roomId: _this.roomId }).then(
                          //   (res) => {
                          //     console.log("生成订单", res);
                          //   }
                          // );
                          _this.virtualcall();
                        }
                      });
                    })
                    .catch(() => {});
                }
              } else if (res.result.obtain === 1) {
                _this.virtualcall();
              }
            }
          });
        } else if (
          _local.get("role") === 0 ||
          _local.get("role") === 3 ||
          _local.get("role") === 5
        ) {
          _this.$dialog
            .alert({
              title: "温馨提示",
              message: "请在个人中心切换【租客】身份使用该功能",
              confirmButtonColor: "#45b7cb",
              theme: "round-button",
              messageAlign: "left",
            })
            .then(() => {});
        } else if (_local.get("role") == 2) {
          _this.$dialog
            .alert({
              title: "温馨提示",
              message: "请在个人中心切换【租客】身份使用该功能",
              confirmButtonColor: "#45b7cb",
              theme: "round-button",
              messageAlign: "left",
            })
            .then(() => {});
        } else if (_local.get("role") == 4) {
          _this.$dialog
            .alert({
              title: "温馨提示",
              message: "请在个人中心切换【租客】身份使用该功能",
              confirmButtonColor: "#45b7cb",
              theme: "round-button",
              messageAlign: "left",
            })
            .then(() => {});
        }
      } else {
        _this.$router.push({ path: "/login" });
      }
    },
    virtualcall() {
      const _this = this;
      virtualNum({ callUserId: this.ryId }).then((res) => {
        console.log("virtualNum:", res);
        if (res.code === 201) {
          window.location.href = `tel:${res.result.number}`;
        } else {
          _this.$toast("拨号失败");
        }
      });
    },
    jumptocommute() {
      this.$router.push({ path: "/commute" });
    },
    showimg(index) {
      ImagePreview({
        images: this.images,
        loop: false,
        startPosition: index,
      });
    },
    //     plusReady() {
    //   const _this = this
    //   plus.share.getServices(function(e) {
    //     _this.shareData = e
    //     for (var i in e) {
    //       if (e[i].id === 'weixin') {
    //         _this.sharewx = e[i]
    //       }
    //     }
    //   })
    // },
    async change1() {
      const _this = this;
      if (this.userId) {
        await collectHouse({ roomId: this.roomId }).then((res) => {
          if (res.code === 2039 || res.code === 200) {
            _this.$toast.success("关注成功");
            _this.collect = true;
          }
        });
      } else {
        _this.$router.push({ path: "/login" });
      }
    },
    async change2() {
      const _this = this;
      await cancelcollectHouse({ roomId: _this.roomId }).then((res) => {
        if (res.code === 2040 || res.code === 200) {
          _this.$toast.success("取消关注成功");
          _this.collect = false;
        }
      });
    },
    showcover() {
      this.$refs.coverbox.style = "display:block";
      this.$refs.covertip.style = "display:block";
    },
    closecover() {
      this.$refs.coverbox.style = "display:none";
      this.$refs.covertip.style = "display:none";
    },
    shareGetIntegral() {
      const _this = this;
      shareIntegral({ type: 5 }).then((res) => {
        console.log("分享积分", JSON.stringify(res));
        if (res.code === 200) {
          _this.$toast("分享成功，获得1积分");
        }
      });
    },
    onSelect(option) {
      const _this = this;
      _this.showShare = false;
      if (option.name === "微信") {
        if (_local.get("role") == 1) {
          var msg = {
            type: "web",
            title: "亲,这里有0中介费的直租好房！",
            content: `租房神器！房东直租没有中介费，价格比长租公寓便宜`,
            thumbs: ["https://image.nunbdc.net/image/152-152.png"],
            href: "https://html.nunbdc.net/share2.html",
            extra: { scene: "WXSceneSession" },
          };
        }
        if (_local.get("role") == 5) {
          var msg = {
            type: "web",
            title: "亲，这里有业主直卖房源！",
            content: `0中介费,价格和业主直接谈，省时省心更省钱！`,
            thumbs: ["https://image.nunbdc.net/image/152-152.png"],
            href: "https://html.nunbdc.net/maishare.html",
            extra: { scene: "WXSceneSession" },
          };
        }
        if (_local.get("role") == 2 || _local.get("role") == 3) {
          var msg = {
            type: "web",
            title: "亲,这里可以直卖直租0中介费！",
            content: `租客多、买家多、快速交易、快速变现！省时省心更赚钱`,
            thumbs: ["https://image.nunbdc.net/image/152-152.png"],
            href: "https://html.nunbdc.net/FangShare.html",
            extra: { scene: "WXSceneSession" },
          };
        }
        if (_local.get("role") == 4) {
          var msg = {
            type: "web",
            title: "兄弟，我在这里可以抢单抢红包！",
            content: `经纪人赚钱神器！全平台自由协作不分佣不扣佣，赚钱多结算快！`,
            thumbs: ["https://image.nunbdc.net/image/152-152.png"],
            href: "https://html.nunbdc.net/agent6.html",
            extra: { scene: "WXSceneSession" },
          };
        }
        _this.sharewx.send(
          msg,
          function () {
            if (_local.get("role") == 1 || _local.get("role") == 4) {
              _this.shareGetIntegral();
            }
            _this.$toast.success("分享成功");
          },
          function () {
            _this.$toast("分享失败");
          }
        );
      }
    },
    gethouseinfo() {
      const _this = this;
      getHousedetail({
        roomId: _this.roomId,
        visitUserId: _this.ryId,
      }).then((response) => {
        if (response.code === 201 || response.code === 200) {
          _this.show = false;
          // console.log('getHousedetail', response)
          _this.housedata = response.result;
          console.log("housedata:", _this.housedata);
          _this.images = response.result.images;
          _this.ryId = response.result.ryId;
          _this.center[0] = response.result.lng;
          _this.center[1] = response.result.lat;
          _this.center2.lng = response.result.lng;
          _this.center2.lat = response.result.lat;
          _this.center3 = _this.center.join(",");
          _this.showmap = true;
          _this.showaround();
          if (response.result.collected === 2) {
            _this.collect = true;
          }
        } else {
          _this.$toast("获取数据失败，请重试");
        }
      });
    },
    getUnloginhouseinfo() {
      getUnloginHousedetail({
        roomId: this.roomId,
      }).then((response) => {
        console.log("未登录", response);
        if (response.code === 201 || response.code === 200) {
          this.show = false;
          this.housedata = response.result;
          this.images = response.result.images;
          this.center[0] = response.result.lng;
          this.center[1] = response.result.lat;
          this.center2.lng = response.result.lng;
          this.center2.lat = response.result.lat;
          this.center3 = this.center.join(",");
          this.showmap = true;
          this.showaround();
        } else {
          this.$toast("获取数据失败，请重试");
        }
      });
    },
    showaround() {
      //初始化地图对象
      var map = new T.Map("normal_map");
      var lnglat = new T.LngLat(this.center[0], this.center[1]);
      map.centerAndZoom(lnglat, 12);
      map.enableDrag();
      getNearby({
        keyword: this.keywords,
        lon: this.center[0],
        lat: this.center[1],
      }).then((res) => {
        console.log("getTianPeriphery", res);
        this.aroundinfo = [];
        res.result.pois.forEach((item) => {
          const info = item.distance + " " + item.address + " " + item.name;
          this.aroundinfo.push(info);
          var lng = item.lonlat.split(",")[0];
          var lat = item.lonlat.split(",")[1];
          // 普通地图展示
          var point = new T.LngLat(lng, lat);
          var marker = new T.Marker(point); // 创建标注
          map.addOverLay(marker);
        });
      });
    },
    selectmap(item) {
      this.showmapapp = false;
      const geolocation = getGeolocation();
      const city = geolocation.city ? geolocation.city : "";
      switch (item.name) {
        case "腾讯地图":
          this.mapurl =
            "https://apis.map.qq.com/uri/v1/search?keyword=" +
            this.housedata.subdistrict +
            "&region=" +
            city;
          this.$router.push({ path: "/mapapp", query: { url: this.mapurl } });
          break;
        case "高德地图":
          this.mapurl =
            "https://uri.amap.com/search?keyword=" +
            this.housedata.subdistrict +
            "&city=" +
            city +
            "&view=map&coordinate=gaode&callnative=1";
          this.$router.push({ path: "/mapapp", query: { url: this.mapurl } });
          break;
        case "百度地图":
          this.mapurl =
            "http://api.map.baidu.com/place/search?query=" +
            this.housedata.subdistrict +
            "&radius=1000&region=" +
            city +
            "&output=html";
          this.$router.push({ path: "/mapapp", query: { url: this.mapurl } });
          break;
        default:
          break;
      }
    },
    onCancel() {
      this.showmapapp = false;
    },
  },
};
</script>

<style lang="less" scoped>
#yin {
  font-size: 12px;
}
.callbtn:active {
  background-image: linear-gradient(to right, #93d7e679, #45b7cb79);
}
.callbtn {
  min-width: 135px;
  background-image: linear-gradient(to right, #93d7e6, #45b7cb);
  img {
    transform: translate(-5px, 12px);
  }
  span:nth-child(4) {
    display: inline-block;
    font-size: 12px;
    transform: translateX(8px);
  }
}
.zhe {
  background-color: #fff;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
}
.name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .PV {
    display: flex;
    align-items: center;
    font-weight: normal !important;
    font-size: 12px !important;
    color: #ccc !important;
  }
}
.van-overlay {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#normal_map,
#panorama {
  margin-top: 10px;
  width: 92vw;
  height: 48vw;
}
.lan {
  margin: 15px;
  font-size: 15px;
  color: rgba(128, 128, 128, 0.562);
}
.navbar {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 15px;
  .van-icon,
  img {
    background-color: #dddddd;
    opacity: 0.8;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 2px;
    color: #333333;
    border: 1px solid white;
  }
}
/deep/.van-nav-bar {
  z-index: 10000;
}
.swiperon {
  width: 100%;
  // height: 200px;
  .imgpart {
    width: 100%;
    height: 250px;
    background-repeat: no-repeat;
    background-position-x: 0px;
    background-position-y: center;
    background-size: 100%;
  }
}
.detail {
  .title {
    margin: 10px 15px;
    font-size: 20px;
    font-weight: bolder;
    color: #333;
  }
  .boxone {
    margin: 10px 15px;
    font-size: 20px;
    font-weight: bold;
    color: #e1194e;
  }
  .check {
    border-radius: 5px;
    margin: 20px 15px;
    display: flex;
    justify-content: space-between;
    color: #45b7cb;
    box-sizing: border-box;
    font-weight: bold;
    div {
      display: flex;
      align-items: center;
      overflow: hidden;
      img {
        width: 12px;
        margin-right: 5px;
      }
      span {
        font-size: 12px;
        transform: scale(calc(10 / 12));
        margin-left: -5px;
      }
    }
  }
  .boxtwo {
    margin: 0 15px;
    padding-bottom: 10px;
    .sbox {
      display: flex;
      div {
        width: 170px;
      }
      .up {
        font-size: 9px;
        vertical-align: super;
      }
    }
    div {
      margin-bottom: 10px;
    }
    span {
      color: #333;
    }
  }
}
.housetips {
  margin: 10px 15px 20px;
  span {
    display: inline-block;
    text-align: center;
    width: 21%;
    padding: 7px 0;
    background-color: #ebfafd;
    color: #359eb8;
    font-size: 12px;
    margin-right: 13px;
    margin-top: 10px;
  }
}
.addressbox {
  margin: 0 15px;
  display: flex;
  justify-content: space-between;
  div {
    border: 1px solid #e5e7f1;
    border-radius: 5px;
    width: 49%;
    height: 70px;
    box-sizing: border-box;
    padding: 16px 50px 18px 10px;
    font-size: 13px;
    &:first-child {
      background: url("../../assets/detail01.png") no-repeat 90% 12px;
      background-size: 55px 45px;
    }
    &:last-child {
      background: url("../../assets/detail02.png") no-repeat 90% 14px;
      background-size: 50px 50px;
    }
    .topwords {
      font-size: 15px;
      font-weight: bold;
      margin-right: 2px;
    }
  }
}
.cut {
  height: 10px;
  background-color: #f1f1f1;
  margin-top: 20px;
}
.asideaddress {
  margin: 20px 15px 0;
  /deep/ #content {
    margin: 10px auto 0;
    height: 200px;
    width: 100%;
    .amap-page-container {
      height: 200px;
    }
    .amap-demo {
      height: 100%;
    }
  }
  .showouteq {
    margin: 10px 15px;
    font-size: 12px;
    color: #333;
  }
}
.tip {
  font-weight: bold;
  span {
    display: inline-block;
    width: 5px;
    height: 15px;
    background-color: #d43b33;
    margin-right: 7px;
    vertical-align: middle;
  }
}
.streetscape {
  margin: 10px 15px;
  .showstreet {
    margin-top: 20px;
    height: 200px;
    /deep/.anchorBL {
      display: none;
    }
  }
}
.see {
  margin: 10px 15px;
  video {
    margin-top: 10px;
    width: 100%;
    height: 200px;
  }
}
.equipment {
  margin: 10px 15px;
  .epart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 10px;
    div {
      font-weight: bold;
      margin: 5px 0;
      text-align: center;
      width: 28%;
      height: 30px;
      line-height: 30px;
      border: 1px solid #45b7cb;
      color: #45b7cb;
      background-color: #fff;
      font-size: 14px;
      margin-right: 17px;
      &:nth-child(3n) {
        margin-right: 0px;
      }
    }
  }
}
.experience {
  margin: 15px;
  .textpart {
    position: relative;
    textarea {
      margin-top: 15px;
      box-sizing: border-box;
      padding: 15px;
      height: 150px;
      resize: none;
      width: 100%;
      background-color: #f9f9f9;
      border-color: #efefef;
      font-size: 12px;
      color: #cfcfcf;
    }
    .van-button {
      width: 85px;
      height: 36px;
      position: absolute;
      bottom: 20px;
      left: 50%;
      margin-left: -38px;
      color: #45b7cb;
      border-color: #45b7cb;
      border-radius: 5px;
    }
  }
}
.housenum {
  padding: 15px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  .copy {
    font-size: 12px;
    margin-left: 10px;
    font-weight: normal;
    color: #45b7cb;
    border: 1px solid #45b7cb;
    padding: 2px 3px;
  }
}
.bcut {
  height: 90px;
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 15px;
  background-color: #fff;
  z-index: 2000;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > div {
      font-size: 14px;
      color: #45b7cd;
      display: flex;
      align-items: center;
    }
    .van-button {
      display: inline-block;
      font-size: 16px;
      color: #fff;
      background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
      border: none;
      // padding: 0 30px;
      border-radius: 20px;
      box-sizing: border-box;
    }
    .cancelbtn:active {
      background-color: #45b7cb;
      color: #fff;
    }
    .cancelbtn {
      min-width: 117px;
      border: 1px solid #45b7cb;
      background-image: none;
      background-color: #fff;
      color: #45b7cb;
      margin-right: 10px;
      img {
        vertical-align: middle;
        margin-right: 3px;
      }
    }
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  z-index: 1000;
}
.block {
  width: 300px;
  height: 250px;
  background-color: #fff;
  border-radius: 10px;
  text-align: center;
  > div {
    &:first-child {
      font-size: 15px;
      margin: 20px 0 30px;
      font-weight: bold;
    }
    &:nth-of-type(2) {
      font-size: 13px;
      span {
        font-size: 17px;
        color: #d43b33;
        font-weight: bold;
        margin: 0 5px;
      }
    }
    &:nth-of-type(3) {
      font-size: 13px;
      margin: 5px 0 25px;
    }
    &:nth-of-type(4),
    &:nth-of-type(5) {
      font-size: 12px;
      color: #ccc;
      margin-bottom: 5px;
    }
    &:last-child {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 29px;
      div {
        border: 1px solid #f1f1f1;
        width: 50%;
        height: 45px;
        line-height: 45px;
        &:first-child {
          border-radius: 0 0 0 10px;
        }
        &:last-child {
          border-radius: 0 0 10px 0;
          color: #45b7cb;
        }
      }
    }
  }
}
/deep/.leftpart {
  .van-dialog__content {
    .van-dialog__message {
      text-align: left !important;
    }
  }
}
</style>
